<template>
  <!--  leaflet地图 -->
  <div id="map"></div>
</template>

<script>
/* eslint-disable */
import { getCurrentInstance, onMounted, ref, props } from "vue";
import * as esri from "esri-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "leaflet.echarts-layer";
import "@/api/leaflet-echarts.js";
import "@/api/echarts.source.js";
import * as echart from "echarts";
import pubsub from "pubsub-js";

import defaultIcon from "leaflet/dist/images/marker-icon.png";
import chartOptions from "@/api/chartsOption.js";
import 智能网联与新能源汽车 from "@/GIS-json/产业链/智能网联与新能源汽车.json";
import 现代高端装备 from "@/GIS-json/产业链/现代高端装备.json";
import 人工智能 from "@/GIS-json/产业链/人工智能.json";
import 半导体与集成电路 from "@/GIS-json/产业链/半导体与集成电路.json";
import 生物医药与健康 from "@/GIS-json/产业链/生物医药与健康（含高端医疗器械）.json";
import 新型储能 from "@/GIS-json/产业链/新型储能.json";
import 商业航天 from "@/GIS-json/产业链/商业航天.json";
import 海洋经济 from "@/GIS-json/产业链/海洋经济.json";
import 空天经济 from "@/GIS-json/产业链/空天经济.json";
import 区界取反 from "@/GIS-json/区界取反.json";
import axios from "axios";

export default {
  name: "园区地图",
  data() {
    return {
      subList: [],
    };
  },
  props: {
    chainName: String, // 声明接收名为 message 的 prop，类型为 String
  },
  setup() {
    const { proxy } = getCurrentInstance();

    let map4;

    let chartMap;

    let interval;

    let industryChain;

    let chainDataList = {
      智能网联与新能源汽车,
      现代高端装备,
      人工智能,
      半导体与集成电路,
      生物医药与健康,
      新型储能,
      商业航天,
      海洋经济,
      空天经济,
    };

    onMounted(() => {
      industryChain = chainDataList[proxy.chainName];
      console.log(proxy.chainName);
      // 初始化地图对象
      initMap();
      // 添加掩膜
      addMask();
      // pubsub订阅
      subscribeList();
      // 制作图表地图
      drawEcharts();

      setInterval(function(){
        console.log(industryChain)

      },100);
    });

    // 初始化地图
    function initMap() {
      // 地图初始化,1
      map4 = L.map("map", {
        preferCanvas: true, // 制图canvas优先显示
        attributionControl: false, // 隐藏信息控件
        zoomControl: false, // 隐藏缩放控件
        maxZoom: 13,
        minZoom: 11,
      });
      map4.dragging.disable();
      map4.scrollWheelZoom.disable();

      // 地图视图定位
      //   map4.setView([22.72, 113.51], 11);
      map4.setView([22.74, 113.51], 8);
      setTimeout(() => {
        map4.setView([22.74, 113.51], 12);
      }, 500);

      // 添加深色底图为初始底图
      L.tileLayer(
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
      ).addTo(map4);

      // 图标初始化
      let size = 25;
      const DefaultIcon = L.icon({
        iconUrl: defaultIcon,
        iconSize: [size, size],
      });
      L.Marker.prototype.options.icon = DefaultIcon;

      map4.on("click", (e) => {
        console.log(e.latlng);
      });
    }

    // 添加掩膜
    function addMask() {
      // 坐标XY转置
      区界取反.features[0].geometry.rings.forEach((element) => {
        let rings = [];
        element.forEach((e) => {
          if (e[0] > 100) {
            rings.push(e.reverse());
          } else {
            rings.push(e);
          }
        });
        // 绘制面要素
        L.polygon(rings, {
          color: "rgba(18, 33, 43, 0.9)",
          weight: 0,
          fillOpacity: 0.95,
          opacity: 1,
        }).addTo(map4);
      });
    }

    // 编辑option
    function makeOption() {
      let chainOption = chartOptions["图表地图-产业链"];

      //   console.log(industryChain);
      //   console.log(chartOptions["图表地图-产业链"].series[0].geoCoord);
      //   console.log(chartOptions["图表地图-产业链"].series[1].markLine.data);
      let coordList = {};
      let pointList = [];
      let pointList1 = [];

      industryChain.features.forEach((element) => {
        coordList[element.attributes["Name1"]] = [
          element.attributes.x,
          element.attributes.y,
        ];
        coordList[element.attributes["Name1"] + "1"] = [
          element.attributes.x,
          element.attributes.y,
        ];

        pointList.push([
          {
            name: element.attributes["Name1"],
            value: 6,
          },
          {
            name: element.attributes["Name1"] + "1",
            value: 6,
          },
        ]);

        pointList1.push({
          name: element.attributes["Name1"],
        });
      });
      //   console.log(coordList);
      //   console.log(pointList);

      chainOption.series[0].geoCoord = coordList;
      chainOption.series[1].markLine.data = pointList;
      chainOption.series[1].markPoint.data = pointList1;

      return chainOption;
    }

    //绘制图表地图
    function drawEcharts() {
      let option = makeOption();
      console.log(option);
      var overlay = new L.echartsLayer(map4, echarts);
      var chartsContainer = overlay.getEchartsContainer();
      var myChart = overlay.initECharts(chartsContainer);
      window.onresize = myChart.onresize;
      overlay.setOption(option);
      return myChart;
    }

    //  pubsub订阅
    function subscribeList() {
      proxy.subList.push(
        pubsub.subscribe("routerChange", (n, data) => {
          // 去除旧图表地图
          if (chartMap != undefined) {
            chartMap.dispose();
          }
          clearInterval(interval);
        })
      );
    }

    return {};
  },
  beforeUnmount() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
* {
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  z-index: 999;
}
</style>